{extend name="base" /}

{block name='css'}
<style type="text/css">

</style>
{/block}

{block name="main"}
{php}
    $areaArr = [];
{/php}
<div class="container" id="app">
    <div class="row">
        <div class="col-md-12 mb-lg-5">
            <form>
                <div class="form-row">
                    <div class="col-3"></div>
                    <div class="col-5">
                        <input type="text" name="name" class="form-control" placeholder="">
                    </div>
                    <div class="col-1">
                        <button type="submit" class="form-control">Submit</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-12">
            <div class="row mb-lg-5" v-for="vo in list">
                <div class="col-auto">
                    <div class="media">
                        <img class="mr-3" width="200rem" :src="vo.pic" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0">
                                <a :href="'/index/service/sid/'+vo.id">{{vo.name}}</a>
                            </h5>
                            {{vo.desc}}
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <img :src="vo.w.icon" alt=""><br>
                    Desc: {{vo.w.desc}}<br>
                    Temp: {{vo.w.temp}}°C<br>
                    nuage: {{vo.w.clouds}}%<br>
                    Humidité: {{vo.w.humidity}}%<br>
                    vitesse du vent: {{vo.w.ws}}m/s<br>
                    Pression: {{vo.w.pressure}}hpa<br>
                    Sunrise: {{vo.w.sunrise}}<br>
                    Sunset: {{vo.w.sunset}}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name='js'}
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        methods: {
        },
        mounted: function () {
            this.$nextTick(()=>{
                this.list.forEach(v =>{
                    axios.get('/index/getWeather/city/'+v.area)
                        .then(res=>{
                            v.w = res.data.data;
                        })
                })
            })
        },
        data:{
            list: {:json_encode($list)}
        }
    });
</script>
{/block}